<!--
* @author wn
* @date 2022/09/21 14:55:41
* @description: 订单详情  头部组件
!-->
<template>
	<div class="detail-head" v-if="order">
		<div class="state">
			<i
				class="iconfont"
				:class="`icon-order-${orderStatus[order.orderState].name}`"
			></i>
			<p>{{ orderStatus[order.orderState].label }}</p>
		</div>
		<div class="info">
			<p>订单编号：{{ order.id }}</p>
			<p>下单时间：{{ order.createTime }}</p>
		</div>
		<div class="btn">
			<!-- 待付款 -->
			<template v-if="order.orderState === 1">
				<XtxButton
					type="primary"
					size="small"
					@click="$router.push(`/member/pay?orderId=${order.id}`)"
				>
					立即付款
				</XtxButton>
				<XtxButton type="plain" size="small" @click="onCancel(order)">
					取消订单
				</XtxButton>
			</template>
			<!-- 待发货 -->
			<template v-if="order.orderState === 2">
				<XtxButton
					type="plain"
					size="small"
					@click="$router.push(`/member/checkout?orderId=${order.id}`)"
				>
					再次购买
				</XtxButton>
			</template>
			<!-- 待收货 -->
			<template v-if="order.orderState === 3">
				<XtxButton type="primary" size="small" @click="onConfirm(order)">
					确认收货
				</XtxButton>
				<XtxButton
					type="plain"
					size="small"
					@click="$router.push(`/member/checkout?orderId=${order.id}`)"
				>
					再次购买
				</XtxButton>
			</template>
			<!-- 待评价 -->
			<template v-if="order.orderState === 4">
				<XtxButton
					type="primary"
					size="small"
					@click="$router.push(`/member/checkout?orderId=${order.id}`)"
				>
					再次购买
				</XtxButton>
				<XtxButton type="plain" size="small">评价商品</XtxButton>
				<XtxButton type="gray" size="small">申请售后</XtxButton>
			</template>
			<!-- 已完成 -->
			<template v-if="order.orderState === 5">
				<XtxButton type="primary" size="small">评价商品</XtxButton>
				<XtxButton
					type="plain"
					size="small"
					@click="$router.push(`/member/checkout?orderId=${order.id}`)"
				>
					再次购买
				</XtxButton>
				<XtxButton type="gray" size="small">申请售后</XtxButton>
			</template>
			<!-- 已取消 没有按钮-->
		</div>
	</div>
	<!-- 取消订单  组件 -->
	<teleport to="body">
		<order-cancel ref="target" />
	</teleport>
</template>
<script>
import { orderStatus } from '@/network/constants'
import { useOnCancel, useOnConfirm } from '../index.vue'
import OrderCancel from './OrderCancel'

export default {
	name: 'DetailHead',
	components: { OrderCancel },
	props: {
		order: {
			type: Object,
			default: () => ({}),
		},
	},
	setup() {
		// 确认收货 取消订单  hook 来自 index

		return { orderStatus, ...useOnCancel(), ...useOnConfirm() }
	},
}
</script>
<style scoped lang="less">
.detail-head {
	display: flex;
	align-items: center;
	height: 180px;
	.state {
		width: 220px;
		text-align: center;
		i {
			font-size: 40px;
			color: @xtxColor;
			margin-bottom: 10px;
		}
		p {
			font-size: 16px;
			color: #666;
		}
	}
	.info {
		width: 240px;
		color: #999;
		line-height: 30px;
	}
	.btn {
		display: flex;
		justify-content: center;
		flex: 1;
		> * {
			margin-right: 20px;
		}
	}
}
</style>
